<template>
  <div class="home">
    <div class="homeContent pageFlex">
      <div class="homeLeft">
        <div class="homeLeftTop bgFF">
          <div class="pageFlex pageAlignCenter" style="width: 100%;">
            <img src="@/assets/home/home_icon1.png" class="titleIcon">
            <div class="cardTitle">数据概览</div>
          </div>
          <div class="pageFlex dataBox pageSpaceBetween">
            <div class="dataBoxItem pageFlexColumn" v-for="(item, index) in dataOverview" :key="index">
              <div class="text">{{ item.name }}</div>
              <div class="pageFlex pageAlignCenter" style="margin-top: 10px;">
                <img :src="item.icon" :alt="item.name" class="icon">
                <div class="num">{{ item.num }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="pageFlex" style="width: 100%;margin-top: 12px;">
          <div class="homeLeftBox1">
            <div class="box1">
              <div class="box1Top pageFlexColumn pageSpaceCenter">
                <div style="width: 100%;" class="pageFlex pageAlignCenter pageSpaceBetween">
                  <div class="msg textOverflow1">{{userStore.nickname}} 您好! 祝您开心每一天</div>
                  <div class="time">{{ setHomeTime('today') }}</div>
                </div>
                <div class="loginTime textOverflow1">上次登录于:{{setHomeTime('loginTime', userInfo.loginDate)}}</div>
              </div>
              <div class="box1Bottom bgFF pageFlex pageAlignCenter">
                <div class="logoBox pageFlex pageFlexCenter">
                  <img src="@/assets/logo/logo_fang.png" alt="易创燃气" class="logo" />
                </div>
                <div class="title textOverflow1">易创燃气有限公司</div>
              </div>
            </div>
            <div class="box2 bgFF pageFlexColumn pageAlignCenter">
              <div class="pageFlex pageAlignCenter" style="width: 100%;position: absolute;top: 11px;left: 16px;">
                <img src="@/assets/home/home_attendanceSituation.png" class="titleIcon">
                <div class="cardTitle">本月考勤情况</div>
              </div>
              <attendance-situation />
            </div>
            <div class="box3 bgFF">
              <div class="pageFlex pageAlignCenter pageSpaceBetween" style="width: 100%;margin-bottom: 17px;">
                <div class="pageFlex pageAlignCenter">
                  <img src="@/assets/home/home_mineUsed.png" class="titleIcon">
                  <div class="cardTitle">我的常用</div>
                </div>
                <div class="pageFlex pageAlignCenter" style="cursor: pointer;">
                  <div class="moreText">自定义</div>
                  <ArrowRightBold style="width: 10px;height: 10px;color: #4E5969;"/>
                </div>
              </div>
              <div class="dataItem pageFlex pageAlignCenter" v-for="(item, index) in mineUsed" :key="index">
                <img class="icon" :src="item.icon" :alt="item.name" />
                <div class="name textOverflow1">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="homeLeftBox2">
            <div class="box1 bgFF">
              <div class="pageFlex pageAlignCenter" style="width: 100%;">
                <img src="@/assets/home/home_rechargeStatistics.png" class="titleIcon">
                <div class="cardTitle">充值笔记统计</div>
              </div>
              <div class="pageFlex pageSpaceBetween" style="width: 100%;margin-top: 16px;flex-wrap: wrap;">
                <div class="dataItem pageFlex pageAlignCenter" v-for="(item, index) in todayRecharge" :key="index">
                  <img src="@/assets/home/home_part.png" class="icon">
                  <div class="pageFlexColumn">
                    <div class="name">{{ item.name }}</div>
                    <div class="num">{{ item.num }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div style="width: 100%;" class="pageFlex">
              <div class="box2 bgFF" style="margin-right: 13px;padding-top: 17px;margin-top: 12px;">
                <div class="pageFlex pageAlignCenter" style="width: 100%;padding-left: 20px;">
                  <img src="@/assets/home/home_todayStatistics.png" class="titleIcon">
                  <div class="cardTitle">今日充值统计</div>
                </div>
                <div style="width: 100%;height: calc(100% - 37px);overflow: hidden;">
                  <todayRechargeComponents />
                </div>
              </div>
              <div class="box2 bgFF" style="padding-top: 12px;margin-top: 12px;">
                <div class="pageFlex pageAlignCenter" style="width: 100%;padding-left: 19px;">
                  <img src="@/assets/home/home_accountStatistics.png" class="titleIcon">
                  <div class="cardTitle">账目信息统计</div>
                </div>
                <div class="pageFlex" style="width: 100%;flex-wrap: wrap;padding: 14px 20px 0 20px;height: calc(100% - 20px);">
                  <div class="dataItem" v-for="(item, index) in accountStatistics" :key="index">
                    <div class="pageFlex pageAlignCenter" style="width: 100%;">
                      <img src="@/assets/home/home_accountPart.png" :alt="item.name" class="icon">
                      <div class="name textOverflow1">{{ item.name }}</div>
                    </div>
                    <div class="num">{{ item.num }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box3 bgFF">
              <div class="pageFlex pageAlignCenter" style="width: 100%;padding-left: 23px;">
                <img src="@/assets/home/home_gasConsumption.png" class="titleIcon">
                <div class="cardTitle">用量统计</div>
              </div>
              <div style="width: 100%;height: calc(100% - 20px);">
                <gasConsumptionComponents />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="homeRight">
        <div class="box1">
          <div class="box1Content">
            <div class="pageFlex pageAlignCenter pageSpaceBetween">
              <div class="pageFlex">
                <div class="tabItem pageFlexColumn pageAlignCenter" :class="{'active': curTab == index}" v-for="(item, index) in noticeTab" :key="index"
                  @click="chooseTab(index)">
                  <div class="name">{{ item.dictLabel }}</div>
                  <div class="line"></div>
                </div>
              </div>
              <div class="pageFlex">
                <div class="pageFlex pageAlignCenter" style="cursor: pointer;" @click="toPage('/system/notice')" v-hasPermi="['system:notice:list']">
                  <div class="moreText">更多</div>
                  <ArrowRightBold style="width: 10px;height: 10px;color: #4E5969;"/>
                </div>
              </div>
            </div>
            <div class="dataBox">
              <div class="pageFlex pageFlexCenter" style="width: 100%;" v-if="noticeData.loading">
                <el-button :loading="noticeData.loading" class="loadingBtn"></el-button>
              </div>
              <div style="width: 100%;" v-else>
                <div class="dataItem pageFlex pageAlignCenter" v-for="(item, index) in noticeData.list" :key="index" v-if="noticeData.list.length">
                  <div class="newTag" v-if="item.isNew">New</div>
                  <div class="text textOverflow1">{{ item.noticeTitle }}</div>
                  <div class="time">{{setTimeShow(item.createTime)}}</div>
                </div>
                <el-text type="info" v-else>暂无{{ curTab == 0 ? '公告' : '消息' }}</el-text>
              </div>
            </div>
          </div>
        </div>
        <div class="box2 bgFF">
          <div class="pageFlex pageAlignCenter" style="width: 100%;padding-left: 13px;">
            <img src="@/assets/home/home_gasConsumption.png" class="titleIcon">
            <div class="cardTitle">警告数据统计</div>
          </div>
          <div style="width: 100%;padding: 21px 14px 12px 11px;">
            <el-table style="width: 100%;border-radius: 8px 8px 0px 0px;" height="378"
              :data="tableData"
              :row-class-name="tableRowClassName">
              <el-table-column fixed prop="date" label="警告类型" :align="'center'"/>
              <el-table-column prop="name" label="历史告警数据" :align="'center'"/>
              <el-table-column prop="state" label="近期告警数据" :align="'center'"/>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, computed } from "vue";
import attendanceSituation from "./home/components/attendanceSituation.vue";
import todayRechargeComponents from "./home/components/todayRechargeComponents.vue";
import gasConsumptionComponents from "./home/components/gasConsumptionComponents.vue";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
const router = useRouter();
import dataOverviewImg1 from '@/assets/home/home_icon2.png';
import dataOverviewImg2 from '@/assets/home/home_icon3.png';
import dataOverviewImg3 from '@/assets/home/home_icon4.png';
import dataOverviewImg4 from '@/assets/home/home_icon5.png';
import dataOverviewImg5 from '@/assets/home/home_icon6.png';
import dataOverviewImg6 from '@/assets/home/home_icon7.png';
const dataOverview = ref([
  {
    name: 'NB表数量',
    icon: dataOverviewImg1,
    num: 0
  },
  {
    name: 'IC卡表数量',
    icon: dataOverviewImg2,
    num: 0
  },
  {
    name: '用户总量',
    icon: dataOverviewImg3,
    num: 0
  },
  {
    name: '使用户数',
    icon: dataOverviewImg4,
    num: 0
  },
  {
    name: '建档户数',
    icon: dataOverviewImg5,
    num: 0
  },
  {
    name: '抄表率',
    icon: dataOverviewImg6,
    num: 0
  }
])
import mineUsedImg1 from '@/assets/home/home_concentratorManagement.png';
import mineUsedImg2 from '@/assets/home/home_fileManagement.png';
const mineUsed = ref([
  {
    name: '集中器管理',
    icon: mineUsedImg1
  },
  {
    name: '表档案管理',
    icon: mineUsedImg2
  }
])
const todayRecharge = ref([
  {
    name: '今日充值(笔)',
    num: 0
  },
  {
    name: '昨日充值(笔)',
    num: 0
  },
  {
    name: '本月充值(笔)',
    num: 0
  },
  {
    name: '上月充值(笔)',
    num: 0
  }
])
const accountStatistics = ref([
  {
    name: '昨日收入(元)',
    num: '0.00'
  },
  {
    name: '今日收入(元)',
    num: '0.00'
  },
  {
    name: '上月收入(元)',
    num: '0.00'
  },
  {
    name: '本月收入(元)',
    num: '0.00'
  }
])
const curTab = ref(0)
const noticeTab = ref([])
const noticeData = ref({
  page: 1,
  pageSize: 10,
  list: [
    {
      isNew: true,
      name: '关于2025年人培养方案建设的通知'
    },
    {
      isNew: false,
      name: '关于2025年人培养方案建设的通知'
    },
    {
      isNew: true,
      name: 'HRM系统安全升级公告：加强访问控制，保障员工信息安全'
    },
    {
      isNew: false,
      name: '关于2025年人培养方案建设的通知'
    },
    {
      isNew: true,
      name: '关于2025年人培养方案建设的通知'
    }
  ],
  loading: false,
})
const tableData = ref([
  {
    date: '集中器市电断',
    name: 0,
    state: 0,
  },
  {
    date: '受到攻击报警',
    name: 0,
    state: 0,
  },
  {
    date: '燃气泄漏',
    name: 0,
    state: 0,
  },
  {
    date: '剩余量不足',
    name: 0,
    state: 0,
  },
  {
    date: '时钟故障',
    name: 0,
    state: 0,
  },
  {
    date: '电池欠压',
    name: 0,
    state: 0,
  },
])
const userInfo = ref({
  loginDate: ''
});
const setTimeShow = computed(()=>{
  return time=>{
    let arr = String(time).split(' ');
    return arr[0] || ''
  }
})
onMounted(initData);
async function initData(){
  getInfoNow();
  noticeTab.value = await getDictData('sys_notice_type');
  getNotice();
}
function getInfoNow(){
  userStore.getInfo().then(res=>{
    userInfo.value = res.user;
  }).catch(err=>{
    console.log(err)
  })
}
import { getDicts } from '@/api/system/dict/data';
import { listNotice } from '@/api/system/notice';
function getNotice(){
  noticeData.value.loading = true;
  listNotice({
    pageNum: 1,
    pageSize: 999,
    noticeType: noticeTab.value[curTab.value].dictValue
  }).then(res=>{
    if(res.code == 200){
      noticeData.value.list = res.rows;
    }else{
      console.log(res);
    }
    noticeData.value.loading = false;
  }).catch(err=>{
    console.log(err);
    noticeData.value.loading = false;
  });
}
function getDictData(type){
  return new Promise(resolve=>{
    getDicts(type).then(res=>{
      if(res.code == 200){
        resolve(res.data);
      }else{
        console.log(res);
        resolve([]);
      }
    }).catch(err=>{
      console.log(err);
      resolve([]);
    });
  })
}
function setHomeTime(type, val){
  if(type == 'loginTime'){
    if(val){
      let date = new Date(val);
      let month = date.getMonth() + 1;
      let str = date.toLocaleString().split(' ');
      return `${date.getFullYear()}-${month > 9 ? month : '0'+month}-${date.getDate() > 9 ? date.getDate() : '0'+date.getDate()} ${date.getHours() > 12 ? 'PM' : 'AM'} ${str[1]}`
    }
    return ''
  }else{
    let date = new Date();
    let day = date.getDay();
    let month = date.getMonth() + 1;
    let dayStr = day == 0 ? '天' : day == 1 ? '一' : day == 2 ? '二' : day == 3 ? '三' : day == 4 ? '四' : day == 5 ? '五' : '六'
    return `${date.getFullYear()}-${month > 9 ? month : '0'+month}-${date.getDate() > 9 ? date.getDate() : '0'+date.getDate()} 星期${dayStr}`
  }
}
function chooseTab(index){
  if(curTab.value == index) return;
  curTab.value = index;
  getNotice();
}
function tableRowClassName(row){
  if (row.rowIndex % 2 == 0) {
    return 'warning-row'
  } else {
    return 'success-row'
  }
}
function toPage(link){
    router.push(link);
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/public.scss";
:deep(.el-table){
  thead{
    th{
      background-color: #4080FF !important;
      height: 16px;
      font-weight: 400;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 16px;
    }
  }
  .warning-row {
    --el-table-tr-bg-color: #FFFBFB;
    font-size: 14px;
    color: #000000;
  }
  .success-row {
    --el-table-tr-bg-color: #E8F3FF;
    font-size: 14px;
    color: #000000;
  }
}
.titleIcon{
  width: 20px;
  height: 20px;
  display: block;
  margin-right: 4px;
}
.cardTitle{
  height: 16px;
  font-weight: bold;
  font-size: 16px;
  color: #1D2129;
  line-height: 16px;
}
.moreText{
  height: 13px;
  font-weight: 400;
  font-size: 13px;
  color: #4E5969;
  line-height: 13px;
}
.loadingBtn{
  padding: 0;
  border: none;
  height: 14px;
  background: transparent;
  color: var(--el-color-primary);
}
.home{
  width: 100%;
  min-height: calc(100vh - 66px);
  background: #F2F2F6;
  .homeContent{
    width: calc(100% - 40px);
    height: 100%;
    margin-left: 20px;
    box-sizing: border-box;
  }
  .homeLeft{
    width: calc(75% - 12px);
    margin-right: 12px;
    padding-top: 20px;
    .homeLeftTop{
      width: 100%;
      height: 132px;
      border-radius: 6px;
      padding: 17px 16px 20px 16px;
      .dataBox{
        width: 100%;
        height: 62px;
        margin-top: 16px;
        .dataBoxItem{
          min-width: 12%;
          .text{
            height: 22px;
            font-weight: 400;
            font-size: 14px;
            color: #4E5969;
            line-height: 22px;
          }
          .icon{
            width: 24px;
            height: 24px;
            display: block;
            margin-right: 8px;
          }
          .num{
            height: 32px;
            font-weight: 500;
            font-size: 24px;
            color: #1D2129;
            line-height: 32px;
          }
        }
      }
    }
    .homeLeftBox1{
      width: calc(41% - 12px);
      margin-right: 12px;
      .box1{
        width: 100%;
        height: 168px;
        border-radius: 6px;
        overflow: hidden;
        .box1Top{
          width: 100%;
          height: 72px;
          overflow: hidden;
          position: relative;
          background-image: url('@/assets/home/home_bg1.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          padding: 0 16px;
          .msg{
            flex: 1;
            height: 22px;
            font-weight: 500;
            font-size: 14px;
            color: #1D2129;
            line-height: 22px;
          }
          .time{
            height: 22px;
            font-weight: 400;
            font-size: 13px;
            color: #4E5969;
            line-height: 22px;
          }
          .loginTime{
            width: 100%;
            height: 20px;
            font-weight: 400;
            font-size: 12px;
            color: #86909C;
            line-height: 20px;
          }
        }
        .box1Bottom{
          width: 100%;
          height: calc(100% - 72px);
          padding: 0 16px;
          .logoBox{
            width: 60px;
            height: 64px;
            border-radius: 6px;
            border: 1px solid #E5E6EB;
            margin-right: 16px;
            overflow: hidden;
            .logo{
              width: 31px;
              height: auto;
            }
          }
          .title{
            flex: 1;
            height: 28px;
            font-weight: 500;
            font-size: 20px;
            color: #1D2129;
            line-height: 28px;
          }
        }
      }
      .box2{
        width: 100%;
        min-height: 228px;
        box-shadow: 2px 2 10px 0px rgba(82,90,102,0.08), 1px 1 2px 0px rgba(82,90,102,0.04);
        border-radius: 8px;
        margin-top: 12px;
        padding: 11px 16px 7px 16px;
        position: relative;
      }
      .box3{
        width: 100%;
        height: 247px;
        box-shadow: 2px 2 10px 0px rgba(82,90,102,0.08), 1px 1 2px 0px rgba(82,90,102,0.04);
        border-radius: 6px;
        margin-top: 12px;
        padding: 16px;
        .dataItem{
          width: 100%;
          height: 72px;
          background: #F7F8FA;
          border-radius: 4px;
          margin-bottom: 12px;
          padding: 16px;
          .icon{
            width: 40px;
            height: 40px;
            border-radius: 6px;
            margin-right: 12px;
          }
          .name{
            flex: 1;
            height: 22px;
            font-weight: 400;
            font-size: 14px;
            color: #1D2129;
            line-height: 22px;
          }
        }
      }
    }
    .homeLeftBox2{
      width: 59%;
      .box1{
        width: 100%;
        min-height: 120px;
        border-radius: 6px;
        padding: 16px;
        .dataItem{
          width: 25%;
          min-width: 156px;
          height: 50px;
          .icon{
            width: 40px;
            height: 40px;
            display: block;
            margin-right: 15px;
          }
          .name{
            height: 22px;
            font-weight: 400;
            font-size: 14px;
            color: #4E5969;
            line-height: 22px;
          }
          .num{
            height: 28px;
            font-weight: 500;
            font-size: 20px;
            color: #1D2129;
            line-height: 28px;
          }
        }
      }
      .box2{
        width: calc((100% - 16px) / 2);
        height: 250px;
        box-shadow: 2px 2 10px 0px rgba(82,90,102,0.08), 1px 1 2px 0px rgba(82,90,102,0.04);
        border-radius: 10px;
        .dataItem{
          width: 50%;
          height: 50%;
          .icon{
            width: 30px;
            height: 30px;
            display: block;
          }
          .name{
            width: calc(100% - 30px);
            height: 16px;
            font-weight: 400;
            font-size: 14px;
            color: #4E5969;
            line-height: 16px;
          }
          .num{
            height: 16px;
            font-weight: bold;
            font-size: 16px;
            line-height: 16px;
            margin-left: 30px;
          }
        }
      }
      .box3{
        width: 100%;
        height: 273px;
        box-shadow: 2px 2 10px 0px rgba(82,90,102,0.08), 1px 1 2px 0px rgba(82,90,102,0.04);
        border-radius: 8px;
        margin-top: 12px;
        padding-top: 22px;
      }
    }
  }
  .homeRight{
    width: 25%;
    min-width: 361px;
    height: 100%;
    padding-top: 20px;
    .box1{
      width: 100%;
      height: 358px;
      background: linear-gradient( 180deg, #E9F3FF 0%, rgba(235,247,255,0.65) 100%);
      border-radius: 6px;
      border-top: 1px solid #165DFF;
      overflow: hidden;
      .box1Content{
        width: 100%;
        height: 100%;
        background: linear-gradient( 180deg, #E9F3FF 0%, rgba(235,247,255,0.65) 100%);
        padding: 16px;
        .tabItem{
          margin-right: 20px;
          cursor: pointer;
          user-select: none;
          .name{
            height: 22px;
            font-weight: 400;
            font-size: 14px;
            color: #1D2129;
            line-height: 22px;
          }
          .line{
            width: 20px;
            height: 2px;
            background: #165DFF;
            border-radius: 4px;
            opacity: 0;
          }
          &.active{
            .name{
              font-weight: 500;
              color: #165DFF;
            }
            .line{
              opacity: 1;
            }
          }
        }
        .dataBox{
          width: 100%;
          padding-top: 16px;
          height: calc(100% - 24px);
          overflow-y: auto;
          &::-webkit-scrollbar{
            display: none;
          }
        }
        .dataItem{
          width: 100%;
          height: 34px;
          background: rgba(255,255,255,0.8);
          border-radius: 3px;
          border: 1px solid rgba(255,255,255,0.29);
          margin-bottom: 8px;
          padding: 0 12px;
          .newTag{
            width: 36px;
            height: 20px;
            background: #165DFF;
            border-radius: 3px;
            font-weight: 500;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 20px;
            text-align: center;
            margin-right: 8px;
          }
          .text{
            flex: 1; 
            height: 22px;
            font-weight: 400;
            font-size: 14px;
            color: #1D2129;
            line-height: 22px;
            display: inline-block;
          }
          .time{
            height: 22px;
            font-weight: 400;
            font-size: 13px;
            color: #86909C;
            line-height: 22px;
            margin-left: 12px;
          }
        }
      }
    }
    .box2{
      width: 100%;
      height: 441px;
      border-radius: 6px;
      margin-top: 12px;
      padding-top: 15px;
    }
  }
}
</style>
